<template>
	<div class="user-avatar-container">
		<a-avatar :size="size" :src="user?.userAvatar || kunkunImg" class="user-avatar-style">
			{{ user?.userName?.[0]?.toUpperCase() || '?' }}
		</a-avatar>
		<span v-if="showName" class="user-name">{{ user?.userName || '匿名用户' }}</span>
	</div>
</template>

<script setup lang="ts">
import kunkunImg from '@/assets/kunkun.png'

interface Props {
	user?: API.UserVO
	size?: number
	showName?: boolean
}

withDefaults(defineProps<Props>(), {
	size: 32,
	showName: false,
})
</script>

<style scoped lang="scss">
.user-avatar-container {
	display: flex;
	align-items: center;
	gap: 8px;

	.user-name {
		font-size: 14px;
		color: #666;
		font-weight: 500;
	}
	.user-avatar-style {
		border: 2px solid #ff8c00 !important;
		box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3) !important;
		transition: all 0.3s ease !important;

		&:hover {
			border-color: #ff7700 !important;
			box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4) !important;
			transform: translateY(-1px) !important;
		}
	}
}
</style>
